<template>
  <div>
    <m-select-input
      v-model:secondValue="secondValue"
      v-model:firstValue="firstValue"
      :selectList="selectList"
      :attrs="attrs"
    ></m-select-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const firstValue = ref('')
const secondValue = ref('')
const attrs = ref({
  select: {
    clearable: true
  },
  input: {
    clearable: true
  }
})
const selectList = ref([
  {
    value: 'New York',
    label: 'New York'
  },
  {
    value: 'London',
    label: 'London'
  },
  {
    value: 'Sydney',
    label: 'Sydney'
  },
  {
    value: 'Ottawa',
    label: 'Ottawa'
  },
  {
    value: 'Paris',
    label: 'Paris'
  },
  {
    value: 'Canberra',
    label: 'Canberra'
  }
])
</script>

<style scoped></style>
